<template>
<div class="goodsListItem" @click="goDetil">
    <img :src="getImgUrl" @load="imageLoad">
    <div class="bottomInfo">
        <p class="title">{{goodsItem.title}}</p>
        <span class="price">{{goodsItem.price}}</span>
        <span class="iconfont icon-shoucang">{{goodsItem.cfav}}</span>
    </div>
</div>
</template>

<script>
export default {
    props: {
        goodsItem:{
            type:Object
        }
    },
    methods: {
        imageLoad(){
            this.$bus.$emit('itemImageLoad')
            // console.log('imageLoad');
        },
        goDetil(){
            // console.log('详情');
            //通过这种地址栏直接是../../形式   而且在router中要配置
            this.$router.push('/detail/'+this.goodsItem.iid)
            // 或者 通过query这种方式 跳转的 地址栏是？形式
            //这种方式不用配置 router :iid形式
            // this.$router.push({
            //     path:'/detail',
            //     query:{
            //         iid:this.goodsItem.iid
            //     }
            // }
            
            // )
        }
    },
    computed: {
        // goodsItem.show.img
        //计算属性他相当一个属性调用时不用括号
        getImgUrl(){
            return this.goodsItem.img || this.goodsItem.image || this.goodsItem.show.img;
        }
    }
};
</script>

<style lang="less" scoped>
.goodsListItem{
    width: 48%;
    padding-bottom: 40px;
    position: relative;
    img{
        width: 100%;
        border-radius: 5px;
    }
    .bottomInfo{
        font-size: 12px;
        position: absolute;
        bottom: 5px;
        left: 0;
        right: 0;
        text-align: center;
        overflow: hidden;
        
        .title{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            

        }
        .price{
            color: red;
            margin-right: 20px;
        }

    }

}

</style>

